<!-- 系统设置 -->
<template>
  <div class="systemSet_box">
    <el-form
      :model="systemInfo"
      ref="form"
      :rules="rules"
      label-width="100px"
      :inline="false"
      size="normal"
    >
      <div class="title">基础设置</div>

      <el-form-item label="系统名称:" prop="name">
        <el-input
          size="small"
          style="width: 300px"
          v-model="systemInfo.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="系统描述:">
        <el-input
          size="small"
          style="width: 300px"
          v-model="systemInfo.detail"
        ></el-input>
      </el-form-item>
      <el-form-item label="系统logo:">
        <div class="logo">
          <img width="30px" src="@/assets/img/logo.png" alt="" />
        </div>
      </el-form-item>

      <div class="title">聊天设置</div>
      <el-form-item label="群聊最多人数:">
        <el-input-number
          v-model="systemInfo.groupMemberLimit"
          size="small"
          :min="0"
          :max="999"
        ></el-input-number>
        <span class="warm_box">0表示不限制</span>
      </el-form-item>
      <el-form-item label="开启在线状态:">
        <el-switch
          v-model="systemInfo.onlineStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
        <span class="warm_box">开启后，用户可以看到联系人的在线状态</span>
      </el-form-item>
      <div class="title">文件上传设置</div>
      <el-form-item label="文件大小限制:">
        <el-input-number
          v-model="systemInfo.uploadLimit"
          size="small"
          :min="1"
        ></el-input-number>
        <span class="warm_box">MB</span>
      </el-form-item>
    </el-form>
    <div class="footer_btn">
      <el-button
        class="save_btn"
        type="primary"
        size="default"
        @click="savesystemInfo"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import { updateSettingInfo } from "@/api/common"
import lockr from "lockr"
export default {
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入系统名称", trigger: "blur" }]
      },
      systemInfo: {
        name: "",
        detail: "",
        groupMemberLimit: 0,
        onlineStatus: false,
        uploadLimit: 0
      }
    }
  },
  created() {
    this.getSettingInfo()
  },

  methods: {
    getSettingInfo() {
      this.systemInfo = lockr.get("systemInfo", this.systemInfo)
    },
    savesystemInfo() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const res = await updateSettingInfo(this.systemInfo)
          if (res) {
            this.$store.commit("setSystemInfo", this.systemInfo)
            this.$message.success("修改成功")
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.systemSet_box {
  padding: 28px;
  .title {
    font-size: 16px;
    line-height: 16px;
    color: #333333;
    font-weight: 600;
    position: relative;
    padding-left: 5px;
    margin: 10px 0;
    &::before {
      content: "";
      display: inline-block;
      position: absolute;
      left: 0;
      width: 2px;
      height: 100%;
      background: rgb(var(--color-primary));
    }
  }

  .warm_box {
    padding-left: 8px;
    font-size: 14px;
    color: #999999;
  }
  .logo {
    width: 53px;
    height: 53px;
    background: #16487e;
    border-radius: 6.4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  position: relative;
  .footer_btn {
    text-align: center;
    position: absolute;
    bottom: 50px;
    left: 45%;
    .save_btn {
      width: 120px;
      height: 40px;
    }
  }
}
</style>
